<template>
  <el-image
    :style="`width: ${props.width}px; height: ${props.height}px;`"
    :src="props.src"
    :fit="props.fit"
  >
    <template #error>
      <el-image
        :style="`width: ${props.width}px; height: ${props.height}px;`"
        :src="props.defaultSrc"
        :fit="props.fit"
      />
    </template>
  </el-image>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted} from "vue"
import {useRouter, useRoute} from "vue-router"


const props = withDefaults(
  defineProps<{
    width: number,
    height: number,
    src: string,
    fit: "" | "fill" | "none" | "contain" | "cover" | "scale-down",
    defaultSrc: string
  }>(),
  {
    width: 40,
    height: 40,
    src: '',
    fit: 'fill',
    defaultSrc: '/static/file/pic.png',
  }
)


</script>

<style lang="scss" scoped>

</style>
